<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <img src="箭头.png" @click="fx()" />
      <h3>集景Studio</h3>
    </div>
    <div class="shopm">
      <img src="商铺名.png" alt />
    </div>

    <!-- 资料文字 -->
    <div class="data">
      <span>集景Studio</span>
      <img src="认证.png" alt />
    </div>
    <div class="shuzi">
      <span>
        999
        <span class="sz1">粉丝</span>
      </span>
      <span>
        999+
        <span class="sz2">获赞和收藏</span>
      </span>
      <p>享受生活，享受设计</p>
    </div>
    <!-- 样品类别 -->
    <div class="style">
      <span>空间规划</span>
      <span>储物收纳</span>
      <span>色彩搭配</span>
      <span>现代</span>
      <br />
      <br />
      <span>简约</span>
      <span>轻奢</span>
    </div>
    <!-- 机构简介 -->
    <div class="beijing">
      <div class="brief">
        <span>
          机构简介
          <span>详情></span>
        </span>
        <p>这房是个垃圾，不要买！！！</p>
      </div>
      <!-- 服务信息 -->
      <div class="service">
        <span>
          认证服务信息
          <span>详情></span>
        </span>
        <p>
          服务类型
          <span class="bj">
            设计报价(元/m
            <sup>2</sup>)
          </span>
        </p>
        <div class="qas">
          <span class="qasj">全案设计、硬装、软装、局装</span>
          <span class="jg">300</span>
        </div>
        <p>资质信息</p>
        <span class="zz">从业9年，历史作品128</span>
        <div class="cation">
          <span>
            <img src="心.png" alt /> 平台认证
          </span>
          <span>
            <img src="盾牌.png" alt />资金监管
          </span>
          <span>
            <img src="钻石.png" alt />品质施工
          </span>
        </div>
      </div>
    </div>
    <!-- 案例展示 -->
    <div class="anli">
      <h2>案例展示</h2>
    </div>
    <div>
      <Shop />
      <Shop />
      <Shop />
      <Shop />
    </div>
    <div class="fwlc">
      <div class="serve">
        <span>服务流程</span>
        <span @click="fy()">查询详情></span>
        <div class="fws">
          <Plan />
          <Plan />
          <Plan />
          <Plan />
        </div>
      </div>
    </div>
    <div class="bottoms">
      <div class="build">
        <span>施工由被窝精工提供服务</span>
        <span>></span>
        <p>被窝家装标准化施工服务</p>
      </div>
      <div class="loop">
        <img src="工程.png" alt />
        <span>
          施工标准化
          <p>标准化工程执行丨标准化验收女友</p>
        </span>
      </div>
      <div class="loop">
        <img src="vr.png" alt />
        <span>
          施工标准化
          <p>标准化工程执行丨标准化验收女友</p>
        </span>
      </div>
      <div class="loop">
        <img src="监控.png" alt />
        <span>
          施工标准化
          <p>标准化工程执行丨标准化验收女友</p>
        </span>
      </div>
      <div class="bott">
        <div class="cation">
          <span>
            <img src="心.png" alt /> 十年品质保证
          </span>
          <span>
            <img src="盾牌.png" alt />施工延期赔偿
          </span>
          <span>
            <img src="钻石.png" alt />施工0增项
          </span>
        </div>
      </div>
    </div>

    <div class="low">
      <span>
        <img src="计算器.png" alt /> 报价计算
      </span>
      <button class="tel">电话咨询</button>
    </div>
  </div>
</template>

<script>
import Shop from "@/components/trim/shop.vue";
import Plan from "@/components/trim/plan.vue";
export default {
  methods: {
    fx() {
      this.$router.push("/plan");
    },
    fy() {
      this.$router.push("/flow");
    },
  },
  components: {
    Shop,
    Plan,
  },
};
</script>

<style scoped>
.header {
  background: white;
  height: 30px;
  line-height: 30px;
  width: 100%;
  position: fixed;
  top: 0;
  padding-right: 40px;
  padding-left: 20px;
}
.header h3 {
  text-align: center;
  font-weight: bold;
}
.header img {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 5px;
}
.shopm {
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
}
.shopm img {
  width: 100%;
}
.data {
  width: 90%;
  margin: 0 auto;
  display: flex;
  /* background: black; */
}
.data span {
  font-size: 18px;
  font-weight: bold;
}
.data img {
  width: 90px;
  margin-left: 20px;
}
.shuzi {
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  font-weight: bold;
  margin-top: 8px;
}
.shuzi span:nth-of-type(2) {
  margin-left: 20px;
}
.shuzi .sz1 {
  font-weight: normal;
  color: #9d9d9d;
}
.shuzi .sz2 {
  font-weight: normal;
  color: #9d9d9d;
}
.shuzi p {
  margin-top: 10px;
  font-size: 13px;
}
.style {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
}
.style span {
  margin-right: 10px;

  font-size: 12px;
  background: #f4f0ec;
  color: #a88f67;
  padding: 5px 10px;
  border-radius: 10px;
}
.brief {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}
.brief span {
  font-size: 16px;
  font-weight: bold;
}
.brief span span {
  font-size: 12px;
  float: right;
  font-weight: normal;
  color: #9a9997;
}
.brief p {
  font-size: 12px;
  margin-top: 10px;
}
.beijing {
  background: -webkit-linear-gradient(top, white, #f8f5f0);
}
.service {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  /* background: #f8f5f0; */
}
.service span {
  font-size: 16px;
  font-weight: bold;
}
.service span span {
  font-size: 12px;
  float: right;
  font-weight: normal;
  color: #9a9997;
}
.service p {
  font-size: 12px;
  margin-top: 10px;
}
.service .bj {
  font-size: 12px;
  font-weight: normal;
  float: right;
}
.qas {
  margin-top: 12px;
}
.qas .qasj {
  font-size: 14px;
  margin-top: 10px;
}
.qas .jg {
  font-size: 26px;
  color: black;
  float: right;
}
.service .zz {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.cation {
  display: flex;
  margin-top: 10px;
}
.cation span {
  display: flex;
  font-size: 14px;
  margin-right: 20px;
  font-weight: normal;
}
.cation img {
  width: 15px;
  height: 18px;
  padding-top: 3px;
  margin-right: 3px;
}
.anli {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
}
.anli h2 {
  font-size: 16px;
  font-weight: bold;
}
.serve {
  width: 90%;
  height: 100px;
  background: white;
  margin: 0 auto;
  position: relative;
  top: 40px;
  border-radius: 3px;
  padding: 15px;
}
.serve span:nth-of-type(1) {
  font-size: 16px;
  font-weight: bold;
}
.serve span:nth-of-type(2) {
  font-size: 12px;
  float: right;
  margin-top: 5px;
  color: #9a9a9a;
}
.fws {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.fwlc {
  width: 100%;
  height: 150px;
}
.build {
  width: 90%;
  margin: 0 auto;
}
.build span {
  font-size: 20px;
  font-weight: bold;
}
.build span:nth-of-type(2) {
  font-size: 22px;
  color: #9a9997;
  float: right;
}
.build p {
  font-size: 12px;
  color: #9a9997;
}
.loop {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 35px;
}
.loop img {
  width: 40px;
  height: 40px;
}
.loop span {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}
.loop p {
  font-size: 12px;
  color: #9a9997;
}
.bott {
  width: 90%;
  height: 100px;
  margin: 0 auto;
  margin-top: 30px;
}
.bott .cation span {
  margin-right: 10px;
  font-size: 14px;
}
.bottoms {
  background: #f8f8f8;
  margin-top: 40px;
}
.low {
  width: 100%;
  margin: 0 auto;

  display: flex;
  position: fixed;
  bottom: 0;
  background: white;
}
.low img {
  width: 40px;
  height: 40px;
  margin-left: 10px;
}
.low span {
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
}
.low .tel {
  background: #222222;
  width: 250px;
  height: 53px;
  line-height: 50px;
  text-align: center;
  margin-left: 10px;
  border-radius: 5px;
  border: none;
  color: white;
  margin-top: 5px;
}
</style>